<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兴趣爱好的交集</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 600px;
        }

        h1 {
            text-align: center;
            color: #4CAF50;
        }

        .list-group {
            list-style-type: none;
            padding: 0;
            margin: 20px 0;
        }

        .list-group-item {
            background-color: #f1f1f1;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .list-group-item span {
            font-size: 16px;
        }

        .button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .button:hover {
            background-color: #45a049;
        }

        .result {
            margin-top: 30px;
            background-color: #e8f5e9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .result ul {
            list-style-type: none;
            padding: 0;
        }

        .result li {
            background-color: #c8e6c9;
            margin-bottom: 8px;
            padding: 10px;
            border-radius: 4px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>找出所有用户的共同兴趣爱好</h1>

        <div>
            <h3>用户兴趣爱好列表</h3>
            <ul class="list-group">
                <li class="list-group-item">
                    <span>用户 1：足球, 篮球, 游泳, 阅读</span>
                </li>
                <li class="list-group-item">
                    <span>用户 2：篮球, 游泳, 瑜伽, 阅读</span>
                </li>
                <li class="list-group-item">
                    <span>用户 3：阅读, 游泳, 足球</span>
                </li>
            </ul>

            <button class="button" onclick="findIntersection()">查看共同爱好</button>
        </div>

        <div class="result" id="result" style="display: none;">
            <h3>共同兴趣爱好：</h3>
            <ul id="intersectionList"></ul>
        </div>
    </div>

    <script>
        function intersect(...arg) {
            const res = new Map(),
                intersect = [];
            arg.forEach(item =>
                [...new Set(item)].forEach(val =>
                    res.set(val, res.get(val) ? res.get(val) + 1 : 1)
                )
            );
            res.forEach((value, key) => value === arg.length && intersect.push(key));
            return intersect;
        }

        function findIntersection() {
            // 用户兴趣爱好数据
            const user1 = ['足球', '篮球', '游泳', '阅读'];
            const user2 = ['篮球', '游泳', '瑜伽', '阅读'];
            const user3 = ['阅读', '游泳', '足球'];

            // 调用 intersect 函数获取交集
            const commonInterests = intersect(user1, user2, user3);

            // 显示结果
            const resultDiv = document.getElementById('result');
            const intersectionList = document.getElementById('intersectionList');
            intersectionList.innerHTML = '';  // 清空上次的结果

            if (commonInterests.length === 0) {
                intersectionList.innerHTML = '<li>没有共同的兴趣爱好。</li>';
            } else {
                commonInterests.forEach(interest => {
                    const li = document.createElement('li');
                    li.textContent = interest;
                    intersectionList.appendChild(li);
                });
            }

            resultDiv.style.display = 'block';
        }
    </script>
</body>

</html>